
<template>
  <div>
     <el-form :inline="true">
      <el-form-item>
        <el-input v-model="keyword" placeholder="请输入公告编号或标题或内容" style="width: 200px;"></el-input>
      </el-form-item>
      <el-button type="primary" icon="el-icon-search" @click="page()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
   
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-upload
                        :show-file-list="false"
                        :before-upload="beforeUpload"
                        :on-success="onSuccess"
                        :on-error="onError"
                        :disabled="importDisabled"
                        style="display: inline-flex;margin-right: 10px;"
                        action="http://39.99.160.25:8088/notices/web/importNoticesExcel"
                        name="userFiles"
                        >
                    <el-button size="small" :disabled="importDisabled" type="success" :icon="importDataIcon">
                       {{importDataText}}
                    </el-button>
                </el-upload>

       <el-table
    :data="noticesList"
    style="width: 100%"
    >
    <el-table-column
      fixed
      prop="noticeNum"
      label="公告编号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="noticeTitle"
      label="公告标题"
      width="100">
    </el-table-column>
    <el-table-column
      prop="noticeContent"
      label="公告内容"
      width="100">
    </el-table-column>
    <el-table-column
      prop="noticeTime"
      label="公告时间"
      width="100">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
 
</template>

<script>
  export default {
    
      methods:{
  //搜索框输入搜索
    page() {
      const _this = this;
      //var arr = [];
      axios({
        url:
          "http://39.99.160.25:8088/notices/web/select_notice?keyWord=" +this.keyword,
        method: "get"
      }).then(function(res) {
        _this.noticesList = res.data.data.selectdata;
       
      });
    },

    resetData() {
      //清空的方法
      //表单输入项数据清空
      this.input = {};
      // this.page()
      this.selectall();
    },

     exportExcel() {
    

      axios({
        url: "http://39.99.160.25:8088/notices/web/exportNoticesExcel",
        method: "post",
      

        responseType: "blob"
      }).then(function(res) {
       
        console.log(res);
      
        let url = window.URL.createObjectURL(new Blob([res.data])); //转换为可用URl地址
        let link = document.createElement("a"); //创建a标签
        link.style.display = "none"; //使之不可见
        link.href = url; //赋URL地址
        //link.setAttribute("download", res.data.fileName+'.xls'); //设置下载属性、以及文件名
        link.setAttribute("download", "通知列表导出" + ".xls");
        document.body.appendChild(link); //将a标签插至页面中
        link.click(); //强制触发a标签事件
      });
    },


          handleEdit(row) {
           console.log(row)
         this.$router.push({
             path:'/updateNotice',
             query:{
               noticeNum:row.noticeNum
             }
           }) 
          
      },
 selectall() {
      const _this = this;
      axios({
        method: "get",
        url: "http://39.99.160.25:8088/notices/web/notice_list",
        data: {},
        headers: {}
      }).then(function(resp) {
        console.log(resp);

        _this.noticesList = resp.data.data.list;
      });
    },

      handleDelete(row) {
      const _this=this
     
 axios({
            method:"delete",
            url: "http://39.99.160.25:8088/notices/web/delete_notice?noticeNum=" +
          row.noticeNum,
            data:{},
            headers:
            {
              "Authorization":sessionStorage.getItem("token")
            }
            
        }).then(function (resp){
          console.log(resp)
           if(resp.data.data.msg=='删除成功'){
            console.log(resp)
              _this.$alert('《'+row.noticeNum+'》删除成功！', '消息',{
                confirmButtonText: '确定',
                 callback: action =>{
                    //  _this.$router.push({
                    //     path:'/notices'
                    // })
                    window.location.reload();
                 }
              })
          }
        });
         },
         onError() {
                this.importDataText = '导入数据';
                this.importDataIcon = 'el-icon-upload2';
                this.importDisabled = false;
               // this.initEmps();
                this.$message.success("导入失败！");
            },
            // 导入文件成功后回调
            onSuccess() {
              // 成功后文本修改为原来的导入数据
                this.importDataText = '导入数据';
                // 图标修改
                this.importDataIcon = 'el-icon-upload2';
                // 将上传组件改为允许使用
                this.importDisabled = false;
                // 调用刷新数据的方法
                 this.selectall();
                //this.initEmps();
                // message 弹出消息
                this.$message.success("导入成功！");
            },
            // 上传文件调用
            beforeUpload() {
              // axios({
              //   url:'',
              //   method:'post',

              // }).then(function(res){

              // })
              // 将文本修改为正在导入
                this.importDataText = '正在导入';
                // 修改其图标
                this.importDataIcon = 'el-icon-loading';
                // 将其上传组件暂时禁用
                this.importDisabled = true;
            }

      },
      
    data() {
      return {
        importDataText: '导入数据',
    // 导入按钮的图标
    importDataIcon: 'el-icon-upload2',
    // 导入按钮是否被禁用
    importDisabled: false,




      username:sessionStorage.getItem('username'),
       imageUrl: sessionStorage.getItem('head_portrait'),
      show: true,
      filename: "",
      input: {
        noticeNum: "",
        noticeTitle:"",
        noticeContent:"",
      },
      keyword:'',
        noticesList:[
        {
          noticeNum:'1',
          noticeTitle: '111',
          noticeContent: '111',
          noticeTime: '111',
        
        },
         {
          noticeNum: '2',
          noticeTitle: '222',
          noticeContent: '222',
          noticeTime: '222',
        
        },
        {
          noticeNum: '3',
          noticeTitle: '333',
          noticeContent: '333',
          noticeTime: '333',
        
        },
        {
          noticeNum: '4',
          noticeTitle: '444',
          noticeContent: '444',
          noticeTime: '444',
        
        },
        ]
      }
    },
    created(){
        this.selectall();
    }
  }
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>